<template>
  <div class="productBuying clearfix">
    <!-- 图片 -->
    <div class="images clearfix">
      <div class="largePic">
        <img v-lazy="largePic" alt="" />
      </div>
      <el-scrollbar class="scroll">
        <div class="smallPic">
          <img
            v-for="obj,i in images"
            :key="i"
            v-lazy="obj.photo_url"
            @mouseover="showLargePic"
          />
        </div>
      </el-scrollbar>
    </div>

    <!-- 信息 -->
    <div class="message clearfix">
      <el-form label-position="right" label-width="100px">
        <el-form :inline="true" label-position="right" label-width="150px">
          <el-form-item :label="product.product_name">
            <div class="collect" @click="collect">
              <i :class="{'el-icon-star-on':true,'gold':isCollect,'tips':!isCollect}"></i> 
              <span class="tips">收藏</span>
            </div>
          </el-form-item>
          <el-form-item label="类别">
              {{this.$global.PRODUCTTYPE[product.type]}}
          </el-form-item>       
        </el-form>
        <el-form :inline="true" label-position="right" label-width="150px">
           <el-form-item label="产地">
            待定
          </el-form-item>
          <el-form-item label="供应量">
              待定
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="right" label-width="150px">
           <el-form-item label="价格">
            <span v-if="specificationList.length > 0">
              {{ specificationList[0].price }}元/{{specificationList[0].name}}
            </span>
          </el-form-item>
          <el-form-item label="起批量">
            <span v-if="specificationList.length > 0">
              {{ specificationList[0].mini_wholesale_quantity }}{{specificationList[0].name}}起批
            </span>
          </el-form-item>
        </el-form>
        
         <el-divider><span class="tips">更新时间：2020-01-01</span></el-divider> 
        
        <el-form-item class="specification-box" label="规格选择">
          <div class="specification">
              <div 
              :class="{ 'oneSpecification':true, 'selected': currentSpecification === id}"
              v-for="spe,id in specificationList" :key="id" @click="selectSpecification(id)">
                  <p>
                      <span style="display:inline-block;width:100px">暂无</span>
                      <span style="margin-left:20px">{{spe.mini_wholesale_quantity}}{{spe.name}}起批</span>
                      <span style="float:right">{{spe.price}}元/斤</span>
                  </p>
              </div>
          </div>
        </el-form-item>
        <el-form-item class="showBuyNum-box" label="购买数量">
          <div class="showBuyNum">
            <div class="center">
                <span class="bt" @click="decreseBuyNum">
                    <i class="el-icon-minus"></i>
                </span>
                <input type="text" v-model="buyNumber">
                <span class="bt" style="margin-left:-7px;" @click="addBuyNum">
                    <i class="el-icon-plus"></i>
                </span>
                <div style="display:inline;width:200px;margin-left:20px;">
                    总价：
                    <span class="totalPrice">{{totalPrice}}</span> 元
                </div> 
            </div>
          </div>
        </el-form-item>
      </el-form>
     
        <div class="button">
            <el-button type="primary" @click="toPurchase" :disabled="isBuy">立即购买</el-button>
            <el-button type="primary" @click="isShowChat = true" disabled>联系商家</el-button>
        </div>
        <div class="text">
          <p class=" tips">支付方式 : 微信、支付宝</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "productBuying",
  data() {
    return {
      isCollect: false, //是否收藏
      largePic: '',
      images: [],
      currentSpecification: -1, //0开始 选中的规格
      buyNumber: 0,
      isShowChat: false, //用于弹出聊天窗口

      product:{},
      specificationList:[],
    };
  },
  computed: {
    isBuy: function () {
      if (this.currentSpecification != -1 && this.buyNumber > 0) {
        return false;
      }
      return true;
    },
    order: function () {
      if (this.currentSpecification >= 0) {
        return {
          product_name: this.product.product_name,
          specification: this.specificationList[this.currentSpecification],
          number: this.buyNumber,
          totalPrice: this.totalPrice,
        };
      }
      return {};
    },
    selectPrice: function () {
      if (this.currentSpecification >= 0) {
        return this.specificationList[
          this.currentSpecification
        ].price;
      }
      return 0;
    },
    totalPrice: function () {
      return (this.selectPrice * 1000 * this.buyNumber) / 1000;
    },
  },
  watch: {
    order: function () {
      this.$emit("getOrder", this.order);
    },
    currentSpecification(newVal, oldVal) {
      if (newVal != -1) {
        this.buyNumber = this.specificationList[this.currentSpecification].mini_wholesale_quantity
      }
    },
  },
  methods: {
    collect() {
      // for (let i = 17; i >= 1; i--)
      // this.$API.deleteFavorite(i)
      if (this.isCollect) {
        this.$API.getFavorite().then(res => {
          if (res.status == 200) {
            for (let obj of res.data) {
              if (obj.product_id == this.$store.state.supplier.product_id) {
                return this.$API.deleteFavorite(obj.id)
              }
            }
          }
        }).then(res => {
          if (res.status == 200) {
            this.isCollect = false
            this.$message.success('收藏已取消')
          }
        })
      } else {
        this.$API.getPurchaser().then(res => {
          if (res.status == 200) {
            let aid = this.$store.state.user.account_id
            for (let obj of res.data) {
                if (obj.account_id == aid) {
                    return this.$API.addFavorite({
                      "purchaser_id": obj.id,
                      "product_id": this.$route.query.pid,
                      "supplier_id": null
                    })
                }
            }
          }
        }).then(res => {
          if (res.status == 201) {
            this.isCollect = true
            this.$message.success('收藏成功')
          }
        })
      }
    },
    // 立即购买
    toPurchase() {
      if (this.buyNumber < this.specificationList[this.currentSpecification].mini_wholesale_quantity) {
        this.$message.warning('买的太少了哦~~')
        return
      }
      this.isShowOrder()
    },
    decreseBuyNum: function () {
      this.buyNumber = this.buyNumber > 0 ? this.buyNumber - 1 : 0
    },
    addBuyNum: function () {
      this.buyNumber++;
    },
    showLargePic: function (e) {
      this.largePic = e.currentTarget.src;
    },
    selectSpecification: function (id) {
      this.currentSpecification = id
    },
    getOrder() {
      return this.order;
    },
    handleClose(done) {
      done();
    },
    async load() {
      let pid = this.$store.state.supplier.product_id
      await this.$API.getProductPhotos().then(res => {
        if (res.status == 200) {
          this.images = []
          for (let obj of res.data) {
            if (obj.product_id == pid) this.images.push(obj)
          }
          if (this.images[0]) this.largePic = this.images[0].photo_url
          return this.$API.getOneSupply(pid)
        }
      }).then(res => {
        if (res.status == 200) {
          this.product = res.data
          return this.$API.getSpecification()
        }
      }).then(res => {
        if (res.status == 200) {
          this.specificationList = []
          for (let obj of res.data) {
            if (obj.product_id == pid) this.specificationList.push(obj)
          }
          return this.$API.getPurchaser()
        }
      }).then(res => {
        if (res.status == 200) {
          let aid = this.$store.state.user.account_id
          for (let obj of res.data) {
              if (obj.account_id == aid) {
                  this.isCollect = true
              }
          }
        }
      })
    }
  },
  props: {
    isShowOrder: Function,
  },
  created() {
    this.load()
  }
};
</script>


<style lang="less" scoped>
.clearfix::after,
.clearfix::before {
  display: table;
  content: "";
  clear: both;
}
/deep/ .el-scrollbar__wrap{
  overflow-x: hidden !important;
}
.productBuying {
  background-color: white;
  .images {
    display: flex;
    margin: 20px auto;
    justify-content: space-around;
    // border: 1px solid red;
    height: 500px;
    .largePic{
      display: flex;
      justify-content: center;
      img{
        width: 80%;
      }
    }
    .scroll{
      width: 40%;
      .smallPic{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        overflow: hidden;
        padding-right: 20px;
        .el-scrollbar {
          width: 100%;
        }
        img{
          margin-top: 10px;
          height: 100px;
        }
      }
    }
  }
  .message{
    padding: 20px;
    .tips {
      color: @color-tips;
    }
    /deep/ .el-form-item__label,
    /deep/ .el-form-item__content{
      font-size: 1rem;
    }
    /deep/ .el-form-item__content{
      width: 200px;
      padding-left: 50px;
    }
    /deep/ .el-form--inline{
      display: flex;
      justify-content: space-around;
    }
    .collect{
      user-select: none;
      .gold{
        color: gold;
      }
    }
    .specification-box,
    .showBuyNum-box{
      display: flex;
      justify-content: center;
      /deep/ .el-form-item__content{
        width: 450px;
        padding-left: 50px;
      }
    }
    .specification-box{
      /deep/ .el-form-item__label {
        height: 140px;
        line-height: 140px;
      }
      .specification{
        &:hover{
            cursor: default;
        }
        .oneSpecification{
            border: 1px solid white;
            width: 400px;
        }
        .selected{
          border-top-color:  rgb(71,204,71);
          border-bottom-color: rgb(71,204,71);
          color:rgb(71,204,71);
        }
        .el-button{
            height: 40px;
            border: 1px solid;
        }
      }
    }
    .showBuyNum-box{
      /deep/ .el-form-item__label {
        height: 72px;
        line-height: 72px;
      }
      .showBuyNum{
          height: 72px;
          line-height: 72px;
          .center{
              height: 40px;
              line-height: 40px;
              display: inline;
          }
          .bt:hover{
              cursor:default
          }
          .bt{
              box-sizing: border-box;
              display: inline-block;
              text-align: center;
              color: white;
              background-color: #67c23a;
              width: 50px;
              height: 40px;
              font-size: 20px;
              border: 1px solid #67c23a;
              user-select: none;
              // margin: 0;
          }
          input{
              display: inline-block;
              width: 80px;
              height: 35px;
              border:none;
              font-weight: 700;
              font-size: 20px;
              border:1px solid #67c23a;
              text-align: center;
              margin-left: -7px;
              position: relative;
              top:-2px;
          }
          input:focus{
              outline: none;
          }
          .totalPrice{
              display:inline-block;
              width:130px;
              color:red;
              font-size: 40px;
              text-align: center;
          }
      }
    }
    .button{
      margin: 0 auto;
      width: 70%;
      display: flex;
      justify-content: space-around;
    }
    .text{
      p{
        text-align: right;
      }
    }
  }
}
</style>